var _this;
// 定义分页组件
Vue.component("page",{
	template:`
	<div>
		<div>
			<table id="tb" lay-even class="layui-table ">
					<colgroup>
			<col width="150">
			<col width="200">
			<col>
		</colgroup>
				<thead>
					<tr>
						<td v-for="column in columns" v-text="column.text" ></td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(obj,index) in data">
						<td v-for="(column,index) in columns" v-if="index!==7&&index!==8" v-text="obj[column.property]"></td>
						<td>  <button type="button" ata-toggle="modal" data-target="#addUserModal" class="layui-btn layui-btn-sm " @click="updateCheckin(obj.in_att_attgroup_id)"> <i class="layui-icon" >&#xe642;</i></button>
							 <button type="button"  class="layui-btn layui-btn-sm layui-btn-danger" @click="deleteCheckin(obj.in_att_attgroup_id)"> <i class="layui-icon" >&#xe640;</i></button>
						</td>
					</tr>
				</tbody>
			</table>
			</div>
		<div class="row">
			<div class="col-lg-4" style="line-height:80px">
				共<span id="dataCount" v-if="page!=null" class="text-danger" v-text="page.dataCount"></span>条数据
				共<span id="pageCount" v-if="page!=null" class="text-danger" v-text="page.pageCount"></span>页数据
				当前是第<span id="pi"  v-if="page!=null" class="text-danger" v-text="page.pageIndex"></span>页
			</div>
			<div class="col-lg-2" style="line-height:80px">
				每页显示
				<select v-model="example.number">
					<option value="1">1</option>
					<option value="5">5</option>
					<option value="10">10</option>
				</select>条
			</div>
			<div class="col-lg-4">
				<ul class="pagination" v-if="page!=null">
					<li v-for="button in buttons" :class="button.active?'active':'' "><a href="javascript:" v-text="button.no" @click="to(button.no)"></a></li>
				</ul>
			</div>
			<div class="col-lg-2">
				<ul class="pagination">
					<li><a href="javascript:" @click="prev()" class="layui-btn layui-btn-normal">上一页</a></li>
					<li><a href="javascript:" @click="next()" class="layui-btn layui-btn-normal">下一页</a></li>
				</ul>
			</div>
		</div>
	</div>


		
	`,
	data:function(){
		return {
			data:[],
			page:{},
			buttons:[],
			message:"",
			Id:-1,
		};
	},

	props:{
		url:{
			type:String
		},
		example:{
			type:Object
		},
		columns:{
			type:Array
		}
	},
	created:function(){
		_this=this;
		this.selectByExample();
		console.log(_this.columns);
	},
	
	methods:{
		selectByExample:function(){
			$.ajax({
				url:_this.url,
				type:"get",
				data:_this.example,
				success:function(data){
					if(data.obj.pageIndex>data.obj.pageCount){
						_this.example.pageIndex=data.obj.pageCount;
					}else{
						_this.data=data.list;
						_this.page=data.obj;
						_this.buttons=[];
						// 取出page.pageIndex
						for(var i=data.obj.pageIndex-3;i<data.obj.pageIndex;i++){
							if(i>=1){
								_this.buttons.push({no:i,active:false});
							}
						}
						_this.buttons.push({no:data.obj.pageIndex,active:true});
						for(var i=data.obj.pageIndex+1;i<data.obj.pageIndex+3;i++){
							if(i<=data.obj.pageCount){
								_this.buttons.push({no:i,active:false});
							}
						}
					}
				},
				error:function(){
					
				}
			});
		},
		to:function(index){
			this.example.pageIndex=index;
		},
		prev:function(){
			if(this.example.pageIndex>1){
				this.example.pageIndex=this.example.pageIndex-1;
			}
		},
		next:function(){
			if(this.example.pageIndex<this.page.pageCount){
				this.example.pageIndex=this.example.pageIndex+1;
			}
		},

		updateCheckin:function(id){
			//操作弹出框
			_this.Id=id;
			alert(_this.Id);
			layui.use('layer', function(){
				  var layer = layui.layer;
				  layer.open({
					  content: '请选择操作：',
					  title:'审核操作'
					  ,btn: ['批准上架请求', '拒绝上架请求']
					  ,btn1: function(index){
					    //按钮【按钮一】的回调
						  layer.prompt({
							  title :'审核意见：',
							  formType: 2,
							  skin: 'layui-layer-molv',
							  offset: 'auto',
							  area: ['500px', '300px'],
							},
							function(value,index){
								_this.message=value;
								  alert(_this.message); //得到value
								  alert(_this.Id);
									$.ajax({
										url:"exam/update",
										type:"post",
										data:{Id:_this.Id, result:1, message:_this.message},
										success:function(data){
											if(data.obj==1){
												alert("操作成功");
											}
											layer.close(index);
											window.location.reload();
										},
										error:function(){
										}
									});
								layer.close(index);
								}
						  ); 
						  layer.close(index);
					  }
					  ,btn2: function(index, layero){
					    //按钮【按钮二】的回调
						  layer.prompt({
							  title :'审核意见：',
							  formType: 2,
							  skin: 'layui-layer-molv',
							  offset: 'auto',
							  area: ['500px', '300px'],
							},
							function(value,index){
								_this.message=value;
								  alert(_this.message); //得到value
								  alert(_this.Id);
									$.ajax({
										url:"exam/update",
										type:"post",
										data:{Id:_this.Id, result:2, message:_this.message},
										success:function(data){
											if(data.obj==1){
												alert("操作成功");
											}
											layer.close(index);
											window.location.reload();
										},
										error:function(){
										}
									});
								layer.close(index);
								}
						  ); 
						  layer.close(index);
					  }

					  ,cancel: function(){ 
					    //右上角关闭回调
					    
					    //return false 开启该代码可禁止点击该按钮关闭
					  }
					});  
				});  
			
		},

		deleteCheckin:function(id){
			//操作弹出框
			console.log("进来了");
			_this.Id=id;
			alert(_this.Id);
			layer.open({
				content: '确认删除该考勤组吗？'
				,btn: ['确认', '取消']
				,yes: function(index, layero){
					//按钮【按钮一】的回调
					console.log("yyy");
					alert(_this.Id);
					$.ajax({
						url:"/deleteCheckin",
						type:"post",
						data: {Id:_this.Id},
						success:function(data){
							alert(data.message);
							layer.close(index);
							window.location.reload();
						},
						error:function(data){
							alert(data.message);
						}
					});
				}
				,btn2: function(index, layero){
					//按钮【按钮二】的回调
					console.log("nnn");
					//return false 开启该代码可禁止点击该按钮关闭
				}
				,cancel: function(){
					//右上角关闭回调
					layer.close();
					//return false 开启该代码可禁止点击该按钮关闭
				}
			});
		},
	},


	watch:{
		example:{
			handler:function(o,n){
				this.selectByExample();
			},
			deep:true
		}
	}
});